<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础指令</title>
</head>
<body>
  <div id="app">
    <h3>插值语法和v-text指令的区别</h3>
    <h4>插值语法</h4>
    <p>你好，{{name}}</p>
    <h4>v-text指令</h4>
    <p v-text="name">你好，{{name}}</p>
    <p>从上面展示的结果可以看出，v-text指令会完全替换文本的内容，而插值语法只会替换本身所占位置的内容</p>
    <br><br>
    <hr>

    <h3>v-html与插值语法的区别</h3>
    <h4>插值语法解析带结构的模型数据</h4>
    <p>跳转链接：{{content}}</p>
    <h4>v-html指令</h4>
    <p v-html="content">跳转</p>
    <p>从上面的结构可以看出，v-html指令可以解析页面的模板结构，而插值语法则是将带有页面结构的数据原样展示，但是v-html指令存在一定的安全性问题，可能会造成xss攻击，尽量避免使用</p>
    <br><br>
    <hr>

    <h4>v-cloak指令的主要作用是在js没有引入之前，对模板的渲染进行控制，比如说使用[v-cloak]属性选择器将所有带有该属性的dom元素的display属性全部设置为none就可以完成这一效果</h4>
    <br><br>
    <hr>

    <h4>v-once指令</h4>
    <p>当前时间为:{{localTime | fmtTime}} {{getCurrentDateTime()}}</p>
    <p v-once>使用v-once指令展示：{{localTime | fmtTime}}</p>
    <p>从页面展示上可以看到，没有使用v-once指令的dom结构的时间展示是一直变化的，而在使用v-once指令之后，那么他的dom结构只会解析一次，不会随着数据的更改发生重新解析</p>
    <br><br>
    <hr>

    <h4>v-pre指令</h4>
    <p v-pre>你好，{{name}}</p>
    <p>v-pre使用之后，编译器会自动跳过使用该指令的模板结构，不会解析该结构，适合写在没有绑定数据的标签上</p>
  </div>

<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data(){
      return{
          name:"张三",
          content:"<a href='http://atguigu.com'>尚硅谷</a>",
          localTime:Date.now()
      }
    },
    filters:{
      fmtTime(val,fmt="YYYY年MM月DD日 hh:mm:ss"){
        return  dayjs(val).format(fmt)
      }
    },
    methods:{
      //获取实时的时间
      getCurrentDateTime(){
        setTimeout(()=>{
          this.localTime= Date.now()
        },100)
      }
    }
  })
</script>
</body>
</html>
